<template>
  <div class="proCharts" ref="charts"></div>
</template>

<script>
// import echarts from "echarts"; //npm install echarts@4.9.0
import * as echarts from "echarts";
export default {
  data() {
    return {
      option: {
        color: ["rgb(8,252,7)", "rgb(255,168,0)", "rgb(104, 187, 196)", "rgb(242, 189, 66)", "rgb(238, 117, 47)"],
        title: {
          text: "",
        },
        tooltip: {
          //提示框
          trigger: "axis",
        },
        legend: {
          //图例的类型
          // icon: "roundRect", //图例icon图标
          type: "plain",
          data: [
            {
              name: "账号总数",
              textStyle: {
                color: "#5B6B73",
              },
            },
            {
              name: "粉丝总数",
              textStyle: {
                color: "#5B6B73",
              },
            },
            {
              name: "关注总数",
              textStyle: {
                color: "#5B6B73",
              },
            },
            {
              name: "新增关注",
              textStyle: {
                color: "#5B6B73",
              },
            },
            {
              name: "新增粉丝",
              textStyle: {
                color: "#5B6B73",
              },
            }
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "17%",
          containLabel: true, //grid区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          type: "category", //坐标轴类型。
          boundaryGap: false, //坐标轴两边留白策略
          data: [
            "",
            "2022-06-05",
            "2022-06-06",
            "2022-06-07",
            "2022-06-08",
            "2022-06-09",
            "2022-06-10",
            "2022-06-11",
            "2022-06-12",
            "2022-06-13",
            "2022-06-14",
            "2022-06-15",
          ],
          axisLabel: {
            //坐标轴刻度标签的相关设置
            interval: 0,
            // rotate: 5, // 文字旋转角度
            textStyle: {
              color: ["#5B6B73"],
              fontSize: 10,
            },
          },
          axisLine: {
            //坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: "rgb(105,105,105)",
            },
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: true,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            //x轴的坐标文字
            show: true,
            textStyle: {
              color: ["#5B6B73"], //文字的颜色
              rotate: "40",
            },
          },
          max: 100, //最大值100
          axisLine: {
            //坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: "rgb(255,255,255)",
            },
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: false,
          },
          splitLine: {
            //坐标在grid区域的分割线
            lineStyle: {
              //设置分割线的样式(图表横线颜色)
              color: "rgb(192,192,192)",
            },
          },
        },
        series: [
          {
            name: "账号总数",
            type: "line",
            smooth: true,
            data: [10, 20, 30, 50, 50, 10, 50, 60, 10, 30, 10, 30],
            lineStyle: {
              color: "rgb(8,252,7)", //线的颜色
            },
          },
          {
            name: "粉丝总数",
            type: "line",
            smooth: true,
            data: [20, 20, 30, 50, 50, 10, 50, 20, 30, 67, 50, 30],
            lineStyle: {
              color: "rgb(255,168,0)", //线的颜色
            },
          },
          {
            name: "关注总数",
            type: "line",
            smooth: true,
            data: [20, 20, 30, 50, 30, 10, 50, 70, 35, 95, 26, 30],
            lineStyle: {
              color: "rgb(104, 187, 196)", //线的颜色
            },
          },
          {
            name: "新增关注",
            type: "line",
            smooth: true,
            data: [20, 50, 30, 50, 90, 10, 50, 20, 46, 50, 30, 30],
            lineStyle: {
              color: "rgb(242, 189, 66)", //线的颜色
            },
          },
          {
            name: "新增粉丝",
            type: "line",
            smooth: true,
            data: [50, 30, 30, 50, 50, 10, 79, 20, 30, 47, 55, 30],
            lineStyle: {
              color: "rgb(238, 117, 47)", //线的颜色
            },
          },
        ],
      },
    };
  },
  created() {},
  mounted() {
    this.mycharts();
  },
  methods: {
    mycharts() {
      let myChart = echarts.init(this.$refs.charts, "macarons");
      myChart.setOption(this.option);
      //图表自适应
      window.addEventListener("resize", function () {
        myChart.resize(); // myChart 是实例对象
      });
    },
  },
};
</script>

<style scoped>
.proCharts {
  width: 100%;
  /* height: 590px; */
  height: 73vh;
  background: white;
}
</style>